<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 在标签属性中如果想要使用表达式, v-bind 绑定即可, 缩写成: -->
    <!-- <div id="app" v-bind:class="msg"> -->
    <div id="app" :class="msg">
        <!-- 插值表达式 -->
       data 数据直接显示 {{ msg }}
       <!-- 想要监听事件, 可以使用 v-on 指令即可, 缩写成 @ -->
       <!-- <button v-on:click="showItem">触发函数</button> -->
       <button @click="showItem">触发函数</button>
       <hr>
       <!-- <button @click="toggleBox">切换盒子显示</button> -->
       <!-- <div v-if="isShow" class="box"></div> -->
       <div v-show="isShow" class="box"></div>
       <!-- 如果遍历时, 想要索引, 那么可以用第二个形参接收 -->
       <!-- <div v-for="val in arr"> -->
       <div v-for="(val, i) in arr" :key="val">
           {{ val }}
           <input type="text"> <button @click="removeItem(val)">删除</button>
       </div>

       <input type="text" v-model="msg">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
              msg: 'hefdsafdsfdsfllo',
              isShow: false,
              arr: ['小明', '小红', '小张']
            },
            methods: {
                removeItem(val) {
                    var newArr = []
                    for (var i = 0; i < this.arr.length; i++) {
                        if (this.arr[i] != val) {
                            newArr.push(this.arr[i])
                        }
                    }
                    this.arr = newArr
                }, 
                toggleBox() {
                    // if (this.isShow == true) {
                    //     this.isShow = false 
                    // } else {
                    //     this.isShow = true
                    // }
                    // 三目运算符
                    // 三元表达式
                    this.isShow = this.isShow ? false : true
                },
                showItem() {
                    // 在 js 代码当中添加 this.xxx 即可获取任意data数据
                    console.log(this.msg);
                }
            }
        })
    </script>
</body>
</html>